<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<link type="text/css" rel="Stylesheet"
		href="../../css/jquery-ui-1.8.20.custom.css" />

	<link type="text/css" rel="Stylesheet" href="../../css/style_coopac.css" />


</h:head>

<h:body>
	<div id="contenedor">
		<div id="header"></div>

		<div id="menu">
			<p:panel header="Menú" toggleable="true">
				<p:tabView id="tabView">
					<p:tab id="tab1" title="Admisión">
						<p:button value="Consulta Socio Potencial Persona">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Consulta Socio Potencial Empresa">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Recepción de documentos Per.">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Recepción de documentos Emp.">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Reportes de Admisión">
							<f:param name="productId" value="10" />
						</p:button>
					</p:tab>

					<p:tab id="tab2" title="Plataforma">
						<p:button value="Registro Solicitud Socio Persona">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Registro Solicitud Socio Empresa">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Registro Ficha Socio Persona">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Registro Ficha Socio Empresa">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Registro Fondo Fortuorio">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Registro PequeAhorro">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Registro JovenCOOP">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Registro AbueAhorro">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Depósito a Plazo Fijo">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Apertura Cuenta Ahorros">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Reportes de Admisión">
							<f:param name="productId" value="10" />
						</p:button>
					</p:tab>

					<p:tab id="tab3" title="Créditos">
						<p:button value="Solicitud de Crédito">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Simulador de Cronogramas">
							<f:param name="productId" value="10" />
						</p:button>
						<p:button value="Reportes de Admisión">
							<f:param name="productId" value="10" />
						</p:button>
					</p:tab>

				</p:tabView>
			</p:panel>
		</div>

		<div id="formularios">
			<h:form id="form" prependId="true">
				<div id="cuerpo">
					<p:panel header="Buscar Persona" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Buscar por.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Seleccione Criterio" itemValue="1" />
									<f:selectItem itemLabel="Documento" itemValue="2" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Criterio:</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
							<div class="buttonSearch">
								<p:commandButton icon="ui-icon-search" id="boton"></p:commandButton>
							</div>
						</div>
					</p:panel>
					<p:panel header="Datos Persona Básicos I" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Ape.Paterno:</label>
							</div>
							<div class="field">
								<p:inputText
									value="#{persona.personaN.apellidoPaternoRazonSocial}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Ape.Materno:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.personaN.apellidoMaterno}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Nombres:</label>
							</div>
							<div class="field">
								<p:inputText
									value="#{persona.personaN.nombrePersonaNombreComercial}"
									style="width:453px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Doc.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMNatural}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Documento" />
									<f:selectItems value="#{maestro.listaTipodocumento}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.documentoPersonaN.numero}"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Telef:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMTelf}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Telef:" />
									<f:selectItems value="#{maestro.listaTipotelefono}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.telefonoPersonaN.numero}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Anexo:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.telefonoPersonaN.anexo}"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Email:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.personaN.email}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Página Web:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.personaN.paginaWeb}"
									style="width:453px" />
							</div>
						</div>
					</p:panel>

					<p:panel header="Datos Domiciliarios" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Departamento:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDepartamento"
									value="#{ubigeo.idDepartamento}" style="width:160px">
									<f:selectItem itemLabel="Dpto." />
									<f:selectItems value="#{ubigeo.listaDepartamento}" />
									<p:ajax update="selectProvincia, selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Provincia:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectProvincia"
									value="#{ubigeo.idProvincia}" style="width:160px">
									<f:selectItem itemLabel="Provincia" />
									<f:selectItems value="#{ubigeo.listaProvincia}" />
									<p:ajax update="selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Distrito:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDistrito"
									value="#{ubigeo.idDistrito}" style="width:160px">
									<f:selectItem itemLabel="Distrito" />
									<f:selectItems value="#{ubigeo.listaDistrito}" />
								</p:selectOneMenu>
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Zona.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMZona}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Zona" />
									<f:selectItems value="#{maestro.listaZona}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Zona:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.nombreZona}"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Vía.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMVia}" style="width:160px">
									<f:selectItem itemLabel="Tipo Vía" />
									<f:selectItems value="#{maestro.listaVia}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Vía:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.nombreVia}"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.numero}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>#Dpto:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.departamento}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Interior:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.interior}"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Manzana:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.manzana}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Lote:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.lote}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Kilómetro:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.kilometro}"
									style="width:157px" />
							</div>
						</div>


						<div class="rowForm">
							<div class="label">
								<label>Referencia:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.referencia}"
									style="width:453px" />
							</div>
							<div class="label">
								<label>Tipo Vivienda.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMVivienda}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Vivienda" />
									<f:selectItems value="#{maestro.listaTipovivienda}" />
								</p:selectOneMenu>
							</div>
						</div>
					</p:panel>

					<p:panel header="Consultas" toggleable="true">

						<div class="table">
							<p:dataTable id="multiCars4" var="cuent"
								value="#{persona.cuentas}" paginator="false"
								selection="#{persona.selectedCuentas}">
								<p:column selectionMode="multiple" style="width:18px" />
								<p:column headerText="Elegir los tipos de cuentas">  
											#{cuent.nombre}
						        		</p:column>
							</p:dataTable>
						</div>

						<p:dataTable id="multiCars3" var="credit"
							value="#{persona.creditos}" paginator="false"
							selection="#{persona.selectedCreditos}">
							<p:column selectionMode="multiple" style="width:18px" />
							<p:column headerText="Eligir los tipos de crédito">  
										#{credit.nombre}
					      	  		</p:column>
						</p:dataTable>

						<div class="rowForm">
							<div class="label">
								<label>Observaciones:</label>
							</div>
							<div class="field">
								<p:inputText id="obs"
									value="#{persona.coopacConsultaSocioPotencial.observacion}"
									style="width:453px" />
							</div>
							<div class="label">
								<label>Ver Selección:</label>
							</div>
							<div class="buttonProcess">
								<p:commandButton value="Mostrar"
									oncomplete="multiCarDialog.show()"
									update=":form:displayMulti1,:form:displayMulti2" />
							</div>
						</div>

						<div class="rowFormDialog">
							<p:dialog id="multiDialog"
								header="Cuentas y Creditos Consultados"
								widgetVar="multiCarDialog" height="300" width="500"
								showEffect="fade" hideEffect="explode"
								style="margin:-775px auto;">
								<h2>CUENTAS SELECCIONADAS</h2>
								<p:dataList id="displayMulti1"
									value="#{persona.selectedCuentas}" var="selectedCuenta"> 
								       #{selectedCuenta.nombre}
								   </p:dataList>
								<h2>CREDITOS SELECCIONADOS</h2>
								<p:dataList id="displayMulti2"
									value="#{persona.selectedCreditos}" var="selectedCredito"> 
								       #{selectedCredito.nombre}
								   </p:dataList>
							</p:dialog>
						</div>

					</p:panel>

					<p:panel header="Procesar" toggleable="true">
						<div class="rowFormProcess">
							<div class="buttonProcess">
								<p:commandButton actionListener="#{persona.addPersona}"
									value="Grabar" update=":form,:form:multiCars4,:form:multiCars3,:form:obs">
								</p:commandButton>
							</div>
							<div class="buttonProcess">
								<p:commandButton actionListener="#{persona.limpiarCampos}"
									update=":form" value="Limpiar"></p:commandButton>
							</div>
							<div class="buttonProcess">
								<p:commandButton value="PDF" actionListener="#{persona.toPDF}"></p:commandButton>
							</div>
						</div>
					</p:panel>
				</div>
			</h:form>
		</div>

		<div id="footer"></div>

	</div>
</h:body>

</html>